//
// 用户中心侧边导航 Sidebar
//

.sidebar {
  width: 240px;
  background: $home-sidebar;

  .nav {
    .nav-link {
      display: flex;
      align-items: center;
      color: $gray-900;
      border-radius: 0;
      padding: 0.75rem 1rem;
      padding-left: 2rem;
      border-left: 3px solid $home-sidebar;

      &:hover {
        background: rgba($black, 0.1);
        border-left-color: rgba($black, 0.01);
      }

      i {
        margin-right: $spacer;
        color: $icon-color;
      }

      span {
        flex: 1;
      }
    }

    .nav-link.active,
    .nav-link.active > i {
      color: theme-color("primary");
    }

    .nav-link.active {
      background: $white;
      border-left: 3px solid theme-color("primary");
    }
  }
}

//
// 用户中心主要内容 Content
//

.content {
  flex: 1;
  padding: 1rem 0;
  background: $white;
  border: 1px solid $border-color;
  
  @include media-breakpoint-up(md) {
    border-left: 0;
  }

  @include media-breakpoint-down(xs) {
    border: 0 !important;
  }

  .title {
    display: flex;
    align-items: center;
    font-size: $font-size-lg;
    border-bottom: 1px solid $border-color;

    .title-text {
      display: block;
      position: relative;
      padding-bottom: .5rem;
      bottom: -1px;
      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: theme-color("primary");
      }
    }

    .title-link {
      display: flex;
      align-items: center;
      position: relative;
      margin-left: auto;
      color: $secondary;
      bottom: -1px;
      font-size: $font-size-base;
      i {
        font-size: $font-size-base;
      }
      @include hover-focus {
        color: $primary;
      }
    }
    
    .title-subtitle {
      color: $secondary;
      font-size: $font-size-base;
    }
  }
}

// 
// profile-content
// 

.profile-content {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 1rem;
  padding-left: 8.5rem;
  .userimg {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid rgba($black, 0.08);
    img {
      width: 112px;
      border-radius: 50%;
    }
  }

  .userimg-edit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: white;
    border-radius: 50%;
    background-color: rgba($black, 0.36);
    opacity: 0;
    transition: opacity 0.2s ease-in;
    &.show {
      opacity: 1;
    }
  }

  .user-sex-img {
    margin-left: 8px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    img {
      margin-top: 3px;
    }
    &.male {
      background-color: rgba($light-blue, .75);
    }
    &.female {
      background-color: rgba($pink, .75);
    }
  }

  @include media-breakpoint-down(lg) {
    padding-left: 1rem;
    .userimg, {
      position: initial;
      margin: auto;
    }
    .listview {
      padding-left: 0 !important;
    }
  }
  
  @include media-breakpoint-down(sm) {
    .list-item:first-child {
      justify-content: center;
    }
  }

  .profile-link-sm {
    display: none;
  }

  @include media-breakpoint-down(xs) {
    .profile-link-sm {
      display: block;
    }
  }
}

.edit-profile-content {
  .edit-title-link {
    display: none;
  }
  .edit-title:hover {
    .edit-title-link {
      display: inline;
    }
  }
}

#profileCollapse {
  .badge {
    margin-top: 2px;
    font-size: 14px;
  }
  dd {
    display: flex;
    align-items: center;
  }
  i {
    font-size: 18px;
    color: $icon-color;
  }
}

// 
// account-content
// 

.account-content {
  position: relative;
  padding: $spacer;

  .account-link {
    display: flex;
    align-items: center;
    color: inherit;

    .left-icon,
    .right-icon {
      display: flex;
      align-items: center;
    }

    .left-icon {
      padding: 1.5rem 1rem;
      i {
        font-size: 48px;
      }
    }

    .right-icon {
      color: $icon-color;
      padding: 1.5rem 1rem;
    }

    @include hover-focus {
      @include gradient-bg($gray-100);
    }
  }
}

// 
// Channels
// 

.channels-content {
  padding: $spacer;
  .card-field {
    margin-bottom: 2*$spacer;
  }
  .card {
    min-height: 240px;
  }

  .nav-pills .nav-item .nav-link {
    color: inherit;
    border-radius: 0%;
    background: transparent;
    border-bottom: 2px solid transparent;
    &.active {
      color: $primary;
      border-color: $primary;
    }
  }
}

.create-new-channel {
  i {
    font-size: 2.5rem;
    text-align: center;
  }
}

// 
// friends-content
// 

.friends-content {
  .card-body {
    color: inherit;
    position: relative;
    padding-left: 4.5*$spacer;
    img {
      width: 40px;
      border-radius: 50%;
      position: absolute;
      left: $spacer;
      top: .75*$spacer;
    }
    @include hover-focus {
      color: inherit;
      @include gradient-bg($gray-100);
    }
  }
}

// 
// notifications-content
// 

.notifications-content {
  .notifications-header {
    padding: .75rem 1rem;
  }
}

// 
// settings-content
// 

.settings-content {
  .settings-subtitle {
    padding: .75rem 0;
  }

  .setting-list {
    padding: .5rem 0;
  }
}

